<template>
    <div>
        <div id="boo">
            <span>今日秒杀</span>
        </div>
        <p id="size">
            <span id="size">距本场结束还剩</span>
            <span >{{d}}</span>天
            <span >{{h}}</span>时
            <span >{{m}}</span>分
            <span >{{s}}</span>秒
        </p>
        <div id="wai">
        <div id="box" @touchstart="touchBegin"
        @touchmove="touchmove"
        @touchend="touchend" :style="contentStyle" ref="content" >
            <div v-for="n in kill" id="inner">
                <img :src="n.img">
                <p id="title">{{n.title}}</p>
                <p id="price">￥{{n.price}}</p>
            </div>
        </div>
        </div>

    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import { Swiper, SwiperItem } from 'vux'
export default {
    data: function() {
        return {
            // startX: "",
            // moveEndX: "",
            t:"",
            X: "",
            d:"",
            h:"",
            m:"",
            s:"",
             prevX:0,
            currentOffsetX:0,
            contentStyle:{
                transform:"translate(0,0)"
            },


        }
    },
    computed: {
        ...mapState([
            "kill"
        ]),
       
    },
    mounted: function() {
        this.$store.dispatch("requestkill");
        var EndTime = new Date(2017, 12, 10, 23, 59, 59);
        var NowTime = new Date();
        this.t = EndTime.getTime() - NowTime.getTime() - 30 * 24 * 60 * 60 * 1000;
        // console.log(this.t)
        if (this.t > 0) {
            this.d = Math.floor(this.t / 1000 / 60 / 60 / 24);
            this.h = Math.floor(this.t / 1000 / 60 / 60 % 24);
            this.m = Math.floor(this.t / 1000 / 60 % 60);
            this.s = Math.floor(this.t / 1000 % 60);
        }
        
          setInterval(()=>{
            this.t = this.t-1000
            // console.log(this.t)
            if (this.t > 0) {
            this.d = Math.floor(this.t / 1000 / 60 / 60 / 24);
            this.h = Math.floor(this.t / 1000 / 60 / 60 % 24);
            this.m = Math.floor(this.t / 1000 / 60 % 60);
            this.s = Math.floor(this.t / 1000 % 60);
        }
        }, 1000)
           
     

        
    },
    components: {
        SwiperItem,
        Swiper
    },
    methods: {
        // start: function(e) {
        //     // e.preventDefault();
        //     console.dir(e)
        //     this.startX = e.touches[0].pageX
        //     console.log(this.startX)
        // },
        // move: function(e) {
        //     // e.preventDefault()
        //     this.moveEndX = e.changedTouches[0].pageX,
        //         // console.log(this.moveEndX)
        //         this.X = this.moveEndX - this.startX
        //     // console.log(this.X)
        //     if (this.X) {
        //         this.$refs.box.style.transform = "translate(" + this.X + "px,0)"
        //     }


        // }
         touchBegin(e){
            // console.log(e.touches[0])
            this.prevX = e.touches[0].pageX;
            this.contentStyle.transition = "";
        },
        touchmove(e){
            var currentX = e.touches[0].pageX;
            var offSet = currentX-this.prevX;
            
            if(this.currentOffsetX>0){
                offSet/=100;
            }
            var maxOffset = this.$refs.content.offsetHeight-this.height;
            maxOffset = - maxOffset;
            if(this.currentOffsetX<maxOffset){
                offSet/=100;
            }

            this.currentOffsetX+=offSet;
            this.contentStyle.transform="translate("+this.currentOffsetX+"px,0)";
            this.prevX= currentX;
        },
        touchend(e){
            if(this.currentOffsetX>0){
                this.currentOffsetX=0;
            }

            var maxOffset = this.$refs.content.offsetHeight-this.height;
            maxOffset = - maxOffset;
            if(this.currentOffsetX<maxOffset){
                this.currentOffsetX=maxOffset
            }

            this.contentStyle.transition = "all 0.3s";

            this.contentStyle.transform="translate("+this.currentOffsetY+"px,0)";
        }
    }
}
</script>

<style scoped>
#size {
    font-size: 13px;
    margin-top: 1vh;
    margin-left: 2vw;
}

#boo {
    width: 100%;
    height: 6vh;
    line-height: 6vh;
    border: solid 1px #dbdbdb;
    color: black;
    font-size: 15px;
}
#wai{
    border-bottom: solid 1px #dbdbdb;
}
#box {
    width: 100%;
    height: 25vh;
    display: flex;
    /* border-bottom: solid 1px #dbdbdb; */
    margin-top: 1vh;
    text-align: center;
    /* overflow-x: scroll; */
}

#inner {
    cursor: pointer;
    width: 30vw;
    height: 25vh;
    /* border:solid 1px black; */
}

img {
    width: 30vw;
    height: 15vh;
}

#title {
    font-size: 13px;
}

p {
    margin: 0;
}

#price {
    color: red;
    font-size: 12px;
}
</style>